<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <!-- load css -->
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/css/font/iconfont.css}" media="all"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/js/layui/css/layui.css}"  media="all"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/bootstrap/bootstrap/css/bootstrap.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/bootstrap-table/bootstrap-table.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/table.css}"  media="all"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/bootstrap/bootstrap/css/bootstrap.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/js/select2/css/select2.css}" media="all"/>

    <style>

        .wizard {
            -webkit-border-radius: 2px;
            -webkit-background-clip: padding-box;
            -moz-border-radius: 2px;
            -moz-background-clip: padding;
            border-radius: 2px;
            background-clip: padding-box;
            -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .3);
            -moz-box-shadow: 0 0 4px rgba(0, 0, 0, .3);
            box-shadow: 0 0 4px rgba(0, 0, 0, .3);
            background-color: #fff;
            position: relative;
            overflow: hidden
        }

        .wizard.wizard-tabbed {
            background: #fbfbfb
        }

        .wizard.wizard-tabbed ul li {
            padding: 0 30px;
            background-color: #fbfbfb
        }

        .wizard.wizard-tabbed ul li .chevron {
            display: none
        }

        .wizard.wizard-tabbed ul li .chevron:before {
            display: none
        }

        .wizard.wizard-tabbed ul li.complete {
            background-color: #fbfbfb
        }

        .wizard.wizard-tabbed ul li.active {
            background: #fff
        }

        .wizard.wizard-wired {
            padding-top: 10px;
            display: block;
            background: #fff;
            text-align: center;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
            border-bottom: 1px solid #eee
        }

        .wizard.wizard-wired ul {
            display: table;
            width: 100%;
            position: relative
        }

        .wizard.wizard-wired ul li {
            display: table-cell;
            text-align: center;
            background-color: #fff;
            width: 20%;
            padding: 0;
            margin: 0;
            -webkit-transition: all 1s ease;
            -moz-transition: all 1s ease;
            -o-transition: all 1s ease;
            transition: all 1s ease
        }

        .wizard.wizard-wired ul li .chevron {
            display: none
        }

        .wizard.wizard-wired ul li .chevron:before {
            display: none
        }

        .wizard.wizard-wired ul li.complete {
            background-color: #fff
        }

        .wizard.wizard-wired ul li.complete .step:before {
            font-size: 22px;
            line-height: 36px
        }

        .wizard.wizard-wired ul li.complete:hover {
            background-color: #fff
        }

        .wizard.wizard-wired ul li.active {
            background-color: #fff
        }

        .wizard.wizard-wired ul li .step {
            border-width: 2px;
            width: 40px;
            height: 40px;
            line-height: 34px;
            font-size: 15px;
            z-index: 2;
            background-color: #fff
        }

        .wizard.wizard-wired ul li .title {
            display: block;
            margin-top: 4px;
            margin-bottom: 6px;
            max-width: 100%;
            font-size: 14px;
            line-height: 20px;
            z-index: 104;
            text-align: center;
            table-layout: fixed;
            -ms-word-wrap: break-word;
            word-wrap: break-word
        }

        .wizard.wizard-wired ul li:before {
            display: block;
            content: "";
            width: 100%;
            height: 2px !important;
            font-size: 0;
            overflow: hidden;
            background-color: #e5e5e5;
            position: relative !important;
            top: 25px;
            z-index: 1 !important
        }

        .wizard.wizard-wired ul li:first-child:before {
            max-width: 51%;
            left: 50%
        }

        .wizard.wizard-wired ul li:last-child:before {
            max-width: 50%;
            width: 50%
        }

        .wizard ul {
            list-style: none outside none;
            padding: 0;
            margin: 0;
            width: 4000px
        }

        .wizard ul.previous-disabled li.complete {
            cursor: default
        }

        .wizard ul.previous-disabled li.complete:hover {
            background: #f3f3f3;
            cursor: default
        }

        .wizard ul.previous-disabled li.complete:hover .chevron:before {
            border-left-color: #f3f3f3
        }

        .wizard ul li {
            float: left;
            margin: 0;
            padding: 0 20px 0 30px;
            line-height: 46px;
            position: relative;
            background: #f5f5f5;
            color: #d0d0d0;
            font-size: 16px;
            cursor: default;
            -webkit-transition: all .218s ease;
            -moz-transition: all .218s ease;
            -o-transition: all .218s ease;
            transition: all .218s ease
        }

        .wizard ul li .step {
            border: 2px solid #e5e5e5;
            color: #ccc;
            font-size: 13px;
            border-radius: 100%;
            position: relative;
            z-index: 2;
            display: inline-block;
            width: 24px;
            height: 24px;
            line-height: 20px;
            text-align: center;
            margin-right: 10px
        }

        .wizard ul li .chevron {
            border: 24px solid transparent;
            border-left: 14px solid #d4d4d4;
            border-right: 0;
            display: block;
            position: absolute;
            right: -14px;
            top: 0;
            z-index: 1
        }

        .wizard ul li .chevron:before {
            border: 24px solid transparent;
            border-left: 14px solid #f5f5f5;
            border-right: 0;
            content: "";
            display: block;
            position: absolute;
            right: 1px;
            top: -24px;
            -webkit-transition: all .218s ease;
            -moz-transition: all .218s ease;
            -o-transition: all .218s ease;
            transition: all .218s ease
        }

        .wizard ul li.complete {
            background: #f5f5f5;
            color: #444
        }

        .wizard ul li.complete:before {
            display: block;
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            right: -1px;
            height: 2px;
            max-height: 2px;
            overflow: hidden;
            background-color: #a0d468;
            z-index: 10000
        }

        .wizard ul li.complete:hover {
            background: #eee;
            cursor: pointer
        }

        .wizard ul li.complete:hover .chevron:before {
            border-left: 14px solid #eee
        }

        .wizard ul li.complete .chevron:before {
            border-left: 14px solid #f5f5f5
        }

        .wizard ul li.complete .step {
            color: #a0d468;
            border-color: #a0d468
        }

        .wizard ul li.complete .step:before {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            line-height: 20px;
            text-align: center;
            border-radius: 100%;
            content: "";
            background-color: #fff;
            z-index: 3;
            font-family: FontAwesome;
            font-size: 12px;
            color: #a0d468
        }

        .wizard ul li.active {
            background: #fff;
            color: #262626
        }

        .wizard ul li.active .step {
            border-color: #2dc3e8;
            color: #2dc3e8
        }

        .wizard ul li.active:before {
            display: block;
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            right: -1px;
            height: 2px;
            max-height: 2px;
            overflow: hidden;
            background-color: #2dc3e8;
            z-index: 10000
        }

        .wizard ul li.active .chevron:before {
            border-left: 14px solid #fff
        }

        .wizard ul li .badge {
            margin-right: 8px
        }

        .wizard ul li:first-child {
            -webkit-border-radius: 2px 0 0 0;
            -webkit-background-clip: padding-box;
            -moz-border-radius: 2px 0 0 0;
            -moz-background-clip: padding;
            border-radius: 2px 0 0 0;
            background-clip: padding-box;
            padding-left: 20px
        }

        .step-content {
            border-top: 0;
            -webkit-border-radius: 0 0 2px 2px;
            -webkit-background-clip: padding-box;
            -moz-border-radius: 0 0 2px 2px;
            -moz-background-clip: padding;
            border-radius: 0 0 2px 2px;
            background-clip: padding-box;
            padding: 10px;
            margin-bottom: 10px;
            -webkit-box-shadow: 1px 0 10px 1px rgba(0, 0, 0, .3);
            -moz-box-shadow: 1px 0 10px 1px rgba(0, 0, 0, .3);
            box-shadow: 1px 0 10px 1px rgba(0, 0, 0, .3);
            background-color: #fbfbfb
        }

        .step-content .step-pane {
            display: none
        }

        .step-content .active {
            display: inline;
        }

        .step-content .active .btn-group .active {
            display: inline-block
        }
        .wizard{
            position: fixed;
            z-index:9999;
        }
        .actions .btn-group, .btn-group-vertical{
            left: 5%;
        }
</style>
</head>
<body>
<div id="simplewizardinwidget" class="wizard" data-target="#simplewizardinwidget-steps">
    <ul class="steps">
        <li data-target="#simplewizardinwidgetstep1" class="active"><span class="step">1</span>发运订单头<span class="chevron"></span></li>
        <li data-target="#simplewizardinwidgetstep2"><span class="step">2</span>发运订单明细<span class="chevron"></span></li>
        <li data-target="#simplewizardinwidgetstep3"><span class="step">3</span>订单渠道<span class="chevron"></span></li>
    </ul>
    <div class="actions" id="simplewizardinwidget-actions">
        <div class="btn-group">
            <button type="button" onclick="returnpage()" class="layui-btn layui-btn-normal" value="关闭"  style="font-size: 15px;">关闭</button>
            <button type="button" class="layui-btn layui-btn-normal btn-prev"> <i class="fa fa-angle-left"></i>上一步</button>
            <button type="button" class="layui-btn layui-btn-normal btn-next" data-last="提交" lay-submit="" lay-filter="addUser">下一步<i class="fa fa-angle-right"></i></button>
        </div>
    </div>
</div>
<!--预留相对定位头部覆盖掉的部分-->
<form action="" class="layui-form layui-form-pane" id="addForm" style="position: relative;top: 47px;">
<div class="step-content" id="simplewizardinwidget-steps">
    <div class="step-pane active" id="simplewizardinwidgetstep1">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" data-title>so编号</label>
                <div class="layui-input-inline">
                    <input type="text" name="date" id="date1" data-required autocomplete="off" lay-verify="required" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">优先级</label>
                <div class="layui-input-inline">
                    <select name="quiz1" data-required>
                        <option value="">请选择优先级</option>
                        <option value="1" selected="">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">客户编号</label>
                <div class="layui-input-inline">
                    <input type="text" name="date" autocomplete="off" lay-verify="required" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">计划发货时间</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="test1" >
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">要求发货时间</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="test2" >
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">交货方式</label>
                <div class="layui-input-inline">
                    <select name="quiz2">
                        <option value="1" selected="">发运</option>
                        <option value="2">自提</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">客户订单号</label>
                <div class="layui-input-inline">
                    <input type="text" name="date" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">订单类型</label>
                <div class="layui-input-inline">
                    <input type="text" name="date" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">审核状态</label>
                <div class="layui-input-inline">
                    <span class="layui-badge layui-bg-gray">请选择订单类型</span>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">客户订单号</label>
                <div class="layui-input-inline">
                    <select lay-ignore="lay-ignore" data-required = "data-required" class="js-data-example-ajax" name="select2cs" style="width: 193px"></select>
                </div>
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>

    </div>
    <div class="step-pane" id="simplewizardinwidgetstep2">
        <button type="button" class="layui-btn layui-btn-normal" id="addRows" data-last="添加一行" >添加一行</button>
        <button type="button" class="layui-btn layui-btn-normal" id="removeRows" data-last="添加一行" >删除一行</button>
        <button type="button" class="layui-btn layui-btn-normal" id="getrowsData" data-last="添加一行" >获取行数据</button>

        <table id="table"></table>
        <table id="table2"></table>
    </div>
    <div class="step-pane" id="simplewizardinwidgetstep3">This is step 3</div>
</div>
</form>

</body>
<div th:include="public/public_js::public_js"></div>
<script th:src="@{/plugin/beyond/assets/js/fuelux/wizard/wizard-custom.js}"></script>

<script>
    $(function () {

    })
    function returnpage() {
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index); //再执行关闭
    }
    layui.use(['myform','zzpUtils','form','laydate','jquery','zzpValidation'],function () {
        var form = layui.form,
            zzpUtils = layui.zzpUtils
            ,laydate = layui.laydate
            ,zzpValidation = layui.zzpValidation
            ,$ = layui.jquery;
        zzpUtils.select2({
            elem:".js-data-example-ajax",
            url:"/wmsgoodstype/getWmsGoodsTypeByHzId"
        })
        $('#simplewizardinwidget').wizard().on('change',function (e,step) {
            if(step.direction =="next"){
                return zzpValidation.validation("#addForm #simplewizardinwidgetstep"+step.step);
            }
        });
        $('#simplewizardinwidget').wizard().on('finished',function () {
            alert("结束啦");
        });
        laydate.render({
            elem: '#test1'
            ,theme: '#20a0ff'
            ,type: 'datetime'
        })
        laydate.render({
            elem: '#test2'
            ,theme: '#20a0ff'
            ,type: 'datetime'
        })
        var $table = zzpUtils.table({
            elem: '#table',
            isApi: true,
            pagination:true,
            url: '/sysLog/list',
            columns: [{
                field: '',
                checkbox: true
            }, {
                field: 'jb',
                title: '错误级别'
            },{
                field: 'mk',
                title: '模块'
            },{
                field: 'an',
                title: '按钮'
            },{
                field: 'jlsj',
                title: '记录时间'
            },{
                field: 'xx',
                title: '信息'
            },{
                field: 'ycyy',
                title: '异常原因'
            },{
                field: 'clr',
                title: '处理人'
            },{
                field: 'clsj',
                title: '处理时间'
            },{
                field: 'cljg',
                title: '处理结果'
            },{
                field: 'clzt',
                title: '处理状态'
            }],
            detailFormatter: function (index, row) {
                return "这里就没有确定过11";
            },
            onDblClickRow: function (row) {
                var data = $table.bootstrapTable('getData');
                var returnrows = $.map(data,function (rowdata) {
                    if(rowdata.id==row.id){
                        return rowdata.id;
                    }
                })
                if(returnrows.length>0){
                    alert("已存在不能重复添加");
                }else{
                    //双击添加行
                    $table.bootstrapTable('append', row);
                }
            }

        });
        //获取行数据
        $("#getrowsData").on('click',function () {
            var data = $table.bootstrapTable('getData');
            console.log("所有数据："+JSON.stringify(data));
        })

        //添加行
        $("#addRows").on('click',function () {
            var $rows = $table.bootstrapTable('getSelections');
            console.log(JSON.stringify($rows));
            //$copytable.bootstrapTable('append', $rows[0]);
            $table.bootstrapTable('append', $rows[0]);
        })
        //删除行
        $("#removeRows").on('click',function () {
            var ids = $.map($table.bootstrapTable('getSelections'), function (row) {
                return row.id;
            });
            console.log(ids);
            $table.bootstrapTable('remove', {
                field: 'id',
                values: ids
            });
        })


        window.operateEvent ={
            "click .layui-btn-primary":function (e, value, row, index) {
                alert(row.mc);
            }
        }

        var $copytable = zzpUtils.table({
            elem: '#table2',
            isApi: true,
            pagination:true,
            url: '/sysLog/list',
            columns: [{
                field: '',
                checkbox: true
            }, {
                field: 'jb',
                title: '错误级别'
            },{
                field: 'mk',
                title: '模块'
            },{
                field: 'an',
                title: '按钮'
            },{
                field: 'jlsj',
                title: '记录时间'
            },{
                field: 'xx',
                title: '信息'
            },{
                field: 'ycyy',
                title: '异常原因'
            },{
                field: 'clr',
                title: '处理人'
            },{
                field: 'clsj',
                title: '处理时间'
            },{
                field: 'cljg',
                title: '处理结果'
            },{
                field: 'clzt',
                title: '处理状态'
            },{
                field:'caozuo',
                title: '操作',
                events:operateEvent,
                formatter:operateFormatter
            }],
            detailFormatter: function (index, row) {
                return "这里就没有确定过11";
            }

        });
        function operateFormatter(value, row, index) {
            return [
                '<a class="layui-btn layui-btn-primary layui-btn-xs" >查看</a>',
                '<a class="layui-btn layui-btn-xs">编辑</a>',
                '<a class="layui-btn layui-btn-danger layui-btn-xs">删除</a>'
            ].join('')
        }

    });
</script>
</html>